<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"      
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <h:head>
        <script type="text/javascript" src="/script/jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="/script/jquery_center.js"></script>
        <style>
            .ui-widget,.ui-widget .ui-widget {
                font-size: 80% !important;
            }
            .center
            {
                margin:auto;
                width:70%;
                vertical-align: middle;
            }
            body {
                background-image: url(../images/BCTrading.jpg);
                background-repeat: no-repeat;
                background-attachment: fixed;
                background-position:center top;
            }
        </style>
        <title>User List</title>
    </h:head>
    <h:body>

        <ui:include src="../topmenu.xhtml"/>
        <div class="center"> 
            <p:ajaxStatus style="width:64px;height:64px;position:fixed;right:5px;bottom:5px">  
                <f:facet name="start">  
                    <p:graphicImage value="../images/loading.gif" />  
                </f:facet>  

                <f:facet name="complete">  
                    <h:outputText value="" />  
                </f:facet>  
            </p:ajaxStatus> 

            <h:form id="form">
                <p:dataTable id="customerTable" var="customer" value="#{customerBackBean.customerList}" 
                             widgetVar="customerTableW" emptyMessage="No customers found with given criteria" 
                             filteredValue="#{customerBackBean.filteredCustomerList}">

                    <p:column id="firstNameColumn" headerText="First Name" filterBy="#{customer.firstName}" filterMatchMode="contains">
                        <h:outputText value="#{customer.firstName}"/>
                    </p:column>
                    <p:column id="middleNameColumn" headerText="Middle Name" filterBy="#{customer.middleInitial}" filterMatchMode="contains">
                        <h:outputText value="#{customer.middleInitial}"/>
                    </p:column>
                    <p:column id="lastNameColumn" headerText="Last Name" filterBy="#{customer.lastName}" filterMatchMode="contains">
                        <h:outputText value="#{customer.lastName}"/>
                    </p:column>
                    <p:column id="aliasColumn" headerText="Alias" filterBy="#{customer.alias}" filterMatchMode="contains">
                        <h:outputText value="#{customer.alias}"/>
                    </p:column>

                    <p:column headerText="Dt Insert" style="white-space: nowrap">  
                        <h:outputText value="#{customer.createDt}" >
                            <f:convertDateTime pattern="MM/dd/yyyy HH:mm" />
                        </h:outputText> 
                    </p:column>
                    <p:column headerText="Dt Update" style="white-space: nowrap">  
                        <h:outputText value="#{customer.updateDt}" >
                            <f:convertDateTime pattern="MM/dd/yyyy HH:mm" />
                        </h:outputText>
                    </p:column>
                    <p:column headerText="Actions" style="width:8%;white-space: nowrap">
                        <p:commandButton id="editButton" update=":customerDialogForm:customerPanelGrid" oncomplete="customerDialogW.show();" icon="ui-icon-pencil" title="Edit">
                            <f:setPropertyActionListener value="#{customer}" target="#{customerBackBean.selectedCustomer}" />  
                        </p:commandButton>
                        <p:commandButton id="removeButton" update=":form" icon="ui-icon-minusthick" title="Remove" oncomplete="confirmation.show();">
                            <f:setPropertyActionListener value="#{customer}" target="#{customerBackBean.selectedCustomer}" />
                        </p:commandButton>                            
                    </p:column>
                    <p:row>
                        <p:commandButton id="addButton" value="Add" update=":customerDialogForm:customerPanelGrid" actionListener="#{customerBackBean.addCustomer}" oncomplete="customerDialogW.show();" icon="ui-icon-plusthick" title="Add"/>            
                    </p:row>
                </p:dataTable>


                <p:confirmDialog id="confirmDialog" message="Are you sure about removing this customer?"  
                                 header="Confirmation" severity="alert" widgetVar="confirmation">  

                    <p:commandButton id="confirm" value="Yes Sure" update=":form" oncomplete="confirmation.hide();"  
                                     actionListener="#{customerBackBean.removeCustomer}" />  
                    <p:commandButton id="decline" value="Not Yet" onclick="confirmation.hide();" type="button" />   

                </p:confirmDialog>  
            </h:form>

            <ui:include src="customerDialog.xhtml"/>

        </div>
        <script>
            $("#principal").center();
        </script>
    </h:body>
</html>